<template>

  <div class="app-container">

    <h3 class="el-form-title">Classification form</h3>

    <div class="container-fluid add-page">
      <el-form ref="form" :model="form">
        <el-row :gutter="20" class="solid-row">
          <el-col :sm="11" :md="11" :lg="10" :xl="7">
            <div class="ul-input"><label class="label-md">Athlete: </label>
              <el-select v-model="value1" placeholder="Select">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </div>
            <div class="ul-input"><label class="label-md">Sports: </label><input value="Text"></div>
            <div class="ul-input"><label class="label-md">Sports Classes: </label><input value="Text"></div>
            <div class="ul-input"><label class="label-md">Date: </label>
              <el-date-picker v-model="form.date1" type="date" placeholder="" style="width: 100%;"/>
            </div>
            <div class="ul-input"><label>Place: </label><input value="Text"></div>
          </el-col>
          <el-col :sm="11" :md="11" :lg="10" :xl="7" :offset="1">
            <div class="ul-input"><label class="label-lg">Sports Status: </label>
              <el-radio v-model="radio" label="1">New</el-radio>
              <el-radio v-model="radio" label="2">National</el-radio>
              <el-radio v-model="radio" label="3">Review</el-radio>
            </div>
            <div class="ul-input"><label class="label-lg hide">Sports Status: </label>
              <el-radio v-model="radio" label="4">Review + F xDate</el-radio>
              <input value="Text">
            </div>
            <div class="ul-input"><label class="label-lg hide">Sports Status: </label>
              <el-radio v-model="radio" label="5">Confirm</el-radio>
            </div>
            <div class="ul-input"><label class="label-lg">Classified by: </label><input value="Text"></div>
            <div class="ul-input"><label class="label-lg">Classified at Event: </label><input value="Text"></div>
          </el-col>
        </el-row>
        <h3>Classification</h3>
        <el-upload
          class="solid-row"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="handleChange"
          :file-list="fileList"
        >
          <!-- <el-button size="small" type="success">点击上传</el-button> -->
          <button type="button" class="el-button el-button--success"><span>Add</span></button>
          <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
        </el-upload>

        <el-row :gutter="20" class="solid-row">
          <el-col :span="4" style="width: 150px;flex: inherit;line-height: 40px;padding-right: 0;">
            <div class="ul-input"><label>Grant Access: </label></div>
          </el-col>
          <el-col :sm="6" :md="6" :lg="4" :xl="4" style="position: relative;">
            <img src="../../assets/images/del2.svg" class="btn-icon-del">
            <div class="ul-input" style="margin-bottom: 0"><input value="Text"></div>
          </el-col>
          <el-col :sm="8" :md="7" :lg="7" :xl="7">
            <div class="ul-input" style="margin-bottom: 0"><input value="Text">
              <button type="button" class="el-button el-button--success"><span>Add</span></button>
            </div>
          </el-col>
        </el-row>
        <el-form-item style="margin: 0;text-align: center;">
          <el-button type="success" size="medium" @click="onBack">Back</el-button>
          <el-button type="success" size="medium" @click="onSubmit">Print</el-button>
          <el-button type="success" size="medium" @click="onSubmit">Save</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                activeName: 'tab2',
                pageType: 'SportMedical',
                radio: '1',
                options1: [{
                    value: 'type1',
                    label: 'type1'
                }],
                value1: '',
                form: {
                    date1: '2019-09-19'
                },
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }],
                checkList: ['选中且禁用', '复选框 A']
            }
        },
        created() {
            const query = this.$route.query
            if (query.page == 'SportScience') {
                this.pageType = 'SportScience'
                this.activeName = 'ss4'
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!')
            },
            onBack() {
                this.$router.back(-1)
            },
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3)
            },
            handleClick(tab, event) {
                console.log(tab, event)
                if (tab.name) {
                    this.activeName = tab.name
                }
            }
        }
    }
</script>

<style>
</style>
